<template>
	<view v-if="coupons.length > 0">
		<view class="gui-list-items  gui-border-b" @tap="open">
			<view class="gui-list-body" style="margin-left: 0;">
				<view class="gui-list-title">
					<text class="gui-list-title-text gui-primary-text">优惠券</text>
					<text class="gui-list-title-desc gui-color-red">去领取</text>
				</view>
			</view>
			<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
		</view>

		<gui-popup ref="popup" position="bottom">
			<view class="gui-bg-gray gui-padding">

				<view class="gui-bg-white" v-for="(item, index) in coupons" :key="index">
					<view class="gui-margin-top" :data-number="item.number" :data-btn="item.btn" @tap="getIt(index)">
						<gui-coupons :coupon="item"></gui-coupons>

						<view class="gui-text-small gui-padding-small gui-border-t gui-margin-top-small">
							{{item.y_shuoming}}</view>
					</view>
				</view>

			</view>
		</gui-popup>
	</view>
</template>

<script>
	export default {
		name: "hyb-yhq",
		props: {
			y_style: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				list: [],
				coupons: []
			};
		},
		created() {
			this.query();
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},

			query() {
				this.coupons = [];
				uni.gPost("youhuiquan/list", {
					y_style: this.y_style
				}).then((list) => {
					this.list = list;
					list.forEach((item) => {
						this.coupons.push({
							color: item.status == 1 ? '#FF8830' : '#FF3456',
							height: '180rpx',
							unit: "￥",
							number: item.y_money,
							txt: item.y_shuoming,
							title: item.y_name,
							desc: "有效期至 " + item.y_endtime,
							btn: item.status == 1 ? "已领取" : "领取",
							drawed: "已抢" + item.count + "张",
							y_shuoming: item.y_shuoming
						})
					});
					this.$emit('coupon-status', this.coupons.length > 0);
				})
			},

			getIt(index) {
				let item = this.list[index];
				if (item.status == 0) {
					uni.gPost("youhuiquan/lingqu", {
						y_id: item.y_id
					}).then(() => {
						uni.showToast({
							title: "领取成功"
						})
						this.query();
					})
				}
			}
		}
	}
</script>

<style>
	.gui-cate-left {
		width: 200rpx;
	}

	.gui-cate-right {
		width: 520rpx;
		left: 230rpx;
	}

	.gui-cate-left-item {
		height: 100rpx;
		padding: 35rpx 0;
		font-size: 26rpx;
	}

	.gui-cate-left-item-title {
		line-height: 32rpx;
		font-size: 28rpx;
		border-left-width: 8rpx;
		text-align: center;
	}

	.gui-cate-left-current {
		border-color: #FF0036 !important;
		background-color: #F6F7F8;
		color: #FF0036;
		font-weight: bold;
	}

	.gui-cate-right-title {
		line-height: 80rpx;
	}

	.gui-cate-product-list {
		margin-bottom: 30rpx;
		margin-right: 25rpx;
	}

	.gui-cate-pimg {
		width: 150rpx;
	}

	.gui-cate-pbody {
		margin-left: 30rpx;
		width: 100rpx;
		flex: 1;
		padding-top: -20rpx;
	}

	.gui-cate-price {
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.gui-grid-item {
		padding: 20rpx 0;
	}

	.gui-ic-image {

		margin-bottom: 10rpx;
	}

	.gui-list-image {
		width: 160rpx;
		height: 160rpx;
	}
</style>